<template>
    <div class="my-center-home">
      <div>
        <div class="my-center-img">
          <img v-if="avatar" :src="avatar">         
          <img v-else src="../assets/img/personal-img-head.svg">        
        </div>
        <div class="my-center-setImg">
            <van-uploader
            @oversize="onOversizeTitle"
            :max-size="10 * 1024 * 1024"
            :after-read="onOversize"
            >
            <button class="my-center-imgbtn">上传文件</button>
            </van-uploader>
        </div>
        <div>
          <div class="my-center-font1">{{phone}}</div>
          <div class="font-z1" style="padding-top: 5px;">
            邀请码:
            <span>{{invitationCode}}</span>
            <img style="position: relative;top: -1px;" @click="copyActiveCode" v-clipboard:copy="invitationCode" src="../assets/img/icon-copy.svg" alt="">
          </div>
        </div>
      </div>
      <div class="my-center-box" @click="jump('/assetsManagement')">
        <img class="my-center-img1" src="../assets/img/Z.svg" alt="">
        <div style="font-size: 20px;font-weight: bold;margin-bottom: 18px;">资产管理</div>
        <div class="font-z1">我的资产估值约</div>
        <div style="margin-top: 8px;position: relative;">
          <span class="font-36">{{assetValuation}}</span>
          <span class="font-z1" style="font-family: axis;margin-left: 13px;">USDT</span>
          <img style="position: absolute;right: 1px; margin-top: 8px;" src="../assets/img/personal-icon-money-more.svg" alt="">
        </div>
      </div>
      <div class="my-center-list">
        <div class="my-center-nav" @click="jump('/interestsAssets')">
          <img src="../assets/img/personal-icon-rights.svg" alt="">
          <span>权益资产</span>
        </div>
        <div class="my-center-nav" @click="jump('/inviteFriends')">
          <img src="../assets/img/personal-icon-invite.svg" alt="">
          <span>邀请好友</span>
        </div>
        <div class="my-center-nav" @click="jump('/orderHistory')">
          <img src="../assets/img/personal-icon-order.svg" alt="">
          <span>算力记录</span>
        </div>
        <div class="my-center-nav" @click="jump('/safetyCenter')">
          <img src="../assets/img/personal-icon-safe.svg" alt="">
          <span>安全中心</span>
        </div>
        <div class="my-center-nav" @click="jump('/faq')">
          <img src="../assets/img/personal-icon-problem.svg" alt="">
          <span>常见问题</span>
        </div>
        <div @click="returnLogin" class="my-center-nav" style="border-bottom: none;">
          <img src="../assets/img/return-login.svg" alt="">
          <span>退出登录</span>
        </div>
      </div>
    </div>
    
  </template>

  <script>
    import { Uploader,Toast } from 'vant'
  export default {
    name: 'myCenter',
    data () {
      return {
        avatar:'',
        phone:'',
        invitationCode:'',
        assetValuation:0
      }
    },
    props:['title'],
    components:{
        [Uploader.name]:Uploader
    },
    computed: {

    },
    mounted() {
        this.initData();
    },
    methods: {
      initData(){
        this.$http.get(this.utils.config+"/gz/member/person_center").then((data)=>{
          if(data.data.success){
            this.avatar = data.data.data.avatar;
            this.phone = data.data.data.phone;
            this.invitationCode = data.data.data.welcomeCodeMine;
            this.assetValuation = data.data.data.assetValuation;            
            localStorage.setItem('cardState',data.data.data.cardState);
            localStorage.setItem('invitationCode',data.data.data.welcomeCodeMine);
            localStorage.setItem('avatar',data.data.data.avatar);
            localStorage.setItem('phone',data.data.data.phone);
            localStorage.setItem('exchangePwd',data.data.data.exchangePwd);
          }
        })
      },
      onOversizeTitle(file) {
        Toast('文件大小不能超过10M！');
      },
      copyActiveCode(){
        Toast("复制成功");
      },
      //上传头像
      onOversize(file) {
        let params = new FormData();
        params.append('file',file.file);
        let config = { headers: { //添加请求头
              'Content-Type': 'multipart/form-data' } }
        this.$http.post(this.utils.config+"/gz/pub/uploadImg",params,config).then((data) => {
          if(data.data.success){
            this.avatar = data.data.data;                        
            this.$http.post(this.utils.config+"/gz/member/edit_person",{avatar:this.avatar}).then((data) => {
                Toast(data.data.message)
                this.initData();
            })
          }
        })
      },
      jump(str){
        this.$router.push(str)
      },
      returnLogin(){
        this.$http.post(this.utils.config+"/gz/pub/logout").then((data) => {
          if(data.data.success){
            localStorage.clear();
            this.$router.push('/login');
          }
        })
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .my-center-font1{
      font-size: 20px;
      font-weight: bold;
      color: #F8F8F8;
      padding-top: 15px;
    }
    .my-center-home{
      width: 100%;
      min-height: 100vh;
      padding: 40px 15px 0px 15px;
      padding-bottom: 80px;
      background-color: #111214;
    }
    .my-center-setImg{
        position: absolute;
        top:40px;
        width:75px;
        height: 75px;
    }
    .my-center-img{
        width: 75px;
        height: 75px;
        display: inline-block;
        float: left;
        border: none;
        margin-right: 15px;
    }
    .my-center-img img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }
    .my-center-imgbtn{
      width:100%;
      height: 75px;
      display:inline-block;
      color:rgba(0,0,0,0);
      background-color: rgba(0,0,0,0);
      border:none;
    }
    .my-center-box{
      width: 100%;
      height: 156px;
      background-color: #6E59FF;
      border-radius: 8px;
      padding: 20px;
      margin-top: 42px;
      position: relative;
    }
    .my-center-img1{
      position: absolute;
      right: 0px;
      bottom: 0px;
      width: 277px;
    }
    .my-center-list{
      width: 100%;
      height: 375px;
      background-color: #1E1F24;
      border-radius: 8px;
      padding: 5px 15px;
      margin-top: 15px;
    }
    .my-center-nav{
      height: 60px;
      line-height: 20px;
      padding: 20px 0px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      img{
        margin-right: 10px;
      }
      span{
        font-size: 16px;
        color: rgba(255, 255, 255, .5);
      }
    }
  </style>
